var WC_GENERATOR_INDEX = (function (){
	url = "";
	areas = {}
	options = {}

	function toggle_area(_id, checked){
		_iframe.tell("hide_area", {id:_id, toggle:checked});
	}
	
	// variables ----------------------------------------------------------------
	var _this 		= {},
		_iframe		= null;
	
	// initialize ---------------------------------------------------------------
	_this.init = function (){
		_iframe = new IframeManager();
		_iframe.setListener(onMessage);
		
		$("#hide_image").attr("src", chrome.extension.getURL('/images/right.png'));
		$("#hide_image").click(function(){
			_iframe.tell("toggle_iframe_wc");
		});
		
		$('input[name="what_all_options"]').bind('click', function(){
			var status = $(this).is(':checked');
			$('input[name="opcoes"]', '#options_checkboxes').prop('checked', status);
			message_changedOptions();
		});
		
		$('#mouse_all').bind('click', function(){
			var status = $(this).is(':checked');
			$('#left_click', '#options_checkboxes').prop('checked', status);
			$('#right_click', '#options_checkboxes').prop('checked', status);
			$('#move', '#options_checkboxes').prop('checked', status);
			$('#drag', '#options_checkboxes').prop('checked', status);
			message_changedOptions();
		});
		
		$('#keyboard_all').bind('click', function(){
			var status = $(this).is(':checked');
			$('#keys_input', '#options_checkboxes').prop('checked', status);
			$('#keys_speed', '#options_checkboxes').prop('checked', status);
			$('#key_copy_paste', '#options_checkboxes').prop('checked', status);
			message_changedOptions();
		});
		
		$('#other_options_all').bind('click', function(){
			var status = $(this).is(':checked');
			$('#inactivity', '#options_checkboxes').prop('checked', status);
			$('#geolocation', '#options_checkboxes').prop('checked', status);
			$('#screen_inf', '#options_checkboxes').prop('checked', status);
			$('#resize_screen', '#options_checkboxes').prop('checked', status);
			
			message_changedOptions();
		});
		
		
		$(function() {
			$("#options_checkboxes").accordion({
				collapsible: true,
				heightStyle: "content"
			});
		});
		
		

		$("#entire_page_check").bind('click', function(){
			if($(this).is(':checked')){
				$("#components_area").css("display", "none");
				$('input[name="area_check_box"]').each(function(){
					$(this).prop('checked', false);
					toggle_area($(this).val(), false);
				});
				$('input[name="area_check_box_all"]').prop('checked', false);
			}
			else{
				$("#components_area").css("display", "");
			}
		});
		
		$('input[name="area_check_box_all"]').bind('click', function(){
			var status = $(this).is(':checked');
			$('input[name="area_check_box"]').each(function(){
				$(this).prop('checked', status);
				toggle_area($(this).val(), status);
			});
		});
		
		
		
		$("#add_area_button").bind('click', function(){
			_iframe.tell("ADD_AREA");
			_iframe.tell("toggle_iframe_wc");
		});
		
		$("#add_component_button").bind('click', function(){
			_iframe.tell("ADD_COMPONENT");
			_iframe.tell("toggle_iframe_wc");
		});
	
		$(document).on("click", "input[type='checkbox'][name='area_check_box']", function() {
			var $this = $(this);
			var status = $(this).is(':checked');
			//console.log("click_check_box "+status);
			
			toggle_area($this.val(), status);
			
			$('input[name="area_check_box_all"]').prop("checked", $('input[type="checkbox"][name="area_check_box"]:checked').length == $('input[type="checkbox"][name="area_check_box"]').length);
		});
		
		$(document).on("click", "input[type='checkbox'][name='opcoes']", function() {
			var $this = $(this);
			var status = $(this).is(':checked');
			//console.log("click_check_box "+status);
			
			//toggle_area($this.val(), status);
			message_changedOptions();
			
			$('input[name="what_all_options"]').prop("checked", $('input[type="checkbox"][name="opcoes"]:checked').length == $('input[type="checkbox"][name="opcoes"]').length);
		});
		
		$('input[type="checkbox"][name="opcoes"]:checked', '#wrap_mouse_all').on("click", function() {
			var status = $(this).is(':checked');
			$("#mouse_all").prop("checked", $('input[type="checkbox"][name="opcoes"]:checked', '#wrap_mouse_all').length == $('input[type="checkbox"][name="opcoes"]', '#wrap_mouse_all').length);
		});
		
		$('input[type="checkbox"][name="opcoes"]:checked', '#wrap_beyboard_all').on("click", function() {
			var status = $(this).is(':checked');
			$("#keyboard_all").prop("checked", $('input[type="checkbox"][name="opcoes"]:checked', '#wrap_beyboard_all').length == $('input[type="checkbox"][name="opcoes"]', '#wrap_beyboard_all').length);
		});
		
		$('input[type="checkbox"][name="opcoes"]:checked', '#wrap_others_all').on("click", function() {
			var status = $(this).is(':checked');
			$("#other_options_all").prop("checked", $('input[type="checkbox"][name="opcoes"]:checked', '#wrap_others_all').length == $('input[type="checkbox"][name="opcoes"]', '#wrap_others_all').length);
		});
		
		$("#add_button").click(function(){
			$("#extern_div").show();
			_iframe.tell("add_url", {});
			message_changedOptions();
		});
		
		$("#done").click(function(){
			tell("generate_code_back_ground", {});
		});
		
		
		$(document).on("click", ".removeArea", function() {
			console.log("removeArea called wc_generator_index.js");
			var $this = $(this);
			delete areas[$this.attr("id")];
			removeArea($this.attr("id"));
			$this.closest("tr").remove();
			if($('input[type="checkbox"][name="area_check_box"]').length == 0)
				$('#WC_AREAS_TABLE').hide();
				
			message_changedOptions();
		});
		
		$(document).on("mouseover mouseout", ".row_area", function() {
			$this = $(this);
			hilightArea($this.find(".removeArea").attr("id"));
			$this.toggleClass("blue_transparent");
			$this.toggleClass("row_gray");
		});
		
		$(document).on("mouseover mouseout", ".ui-state-default", function() {
			$this = $(this);
			$this.toggleClass("ui-state-hover");
		});

		$(document).children().addClass("ui_web_collector");
		
	};
	
	// private functions --------------------------------------------------------

	// events -------------------------------------------------------------------
	function onMessage (request){
		if(request.data.view == 'wc_generator_index'){
			switch (request.message){
				case 'ADD_AREA': 
					message_onAddArea(request.data); 
				break;
				case 'add_url_frame': 
					message_onAddURL(request.data); 
				break;
			}
		}
	};
	
	function message_onAddURL(data){
		//console.log('add_url_frame '+data.url);
		if(data.url != ""){
			url = data.url;
			message_changedOptions();
		}
	}
	
	function generate_onClick (event){

	};
	
	function removeArea(_id){
		_iframe.tell("remove_area", {id:_id});
	}
	
	function hilightArea(_id){
		_iframe.tell("hilight_area", {id:_id});
	}
	
	function generateCode(){
		//_iframe.tell("generate_code", {});
	}
	
	function message_changedOptions(){
		var options  = {
			options: new Array(),
			entire_page: $("#entire_page_check").is(':checked'),
			areas: areas
		};
		
		$('input[type="checkbox"][name="opcoes"]:checked').each(function (){
			options.options.push($(this).val());
		});
		
		tell("changed_options", {url:url, options:options}); 
	}

	// messages -----------------------------------------------------------------
	function message_onAddArea (data){
		$('#WC_AREAS_TABLE').show();
		$('#WC_AREAS_TABLE tr:first').after('<tr class="row_area row_gray" > \
												<td><input type="checkbox" name="area_check_box" value="'+data.id+'" checked="true"></td> \
												<td>'+data.id+'</td> \
												<td> \
													<span style="background-position:-96px -128px; \
																 background-image:url(\'../../jquery-ui-1.10.4.custom/css/ui_web_collector/images/ui-icons_a83300_256x240.png\'); \
																 width: 16px; height: 16px; \
																 position: absolute; \
																 margin-top: -8px; margin-left: 19px;" \
														  id="'+data.id+'" \
														  class="ui-state-default ui-corner-all removeArea"> \
													</span> \
												</td></tr>');
												
		areas[data.id] = {top:data.top,
						  left: data.left,
						  width: data.width,
						  height: data.height
						 }
						 
		console.log(areas);
						 
		message_changedOptions();
	};
	
	// public functions ---------------------------------------------------------


	
	function tell (message, data){
		var data = data || {};
		
		// send a message to "background.js"
		chrome.extension.sendRequest({
			message : message,
			data	: data
		});
	};
	
	return _this;
}());

document.addEventListener("DOMContentLoaded", function (){ new WC_GENERATOR_INDEX.init(); }, false);

